<script setup name="home">
import { useStore } from 'vuex';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

const store = useStore();
store.dispatch('home/updateCategory');

const { category } = toRefs(store.state.home);

const index = ref(-1);

const navIndex = ref(-1);

function onMouseEnter(i) {
  index.value = i;
}

function onMouseLeave() {
  index.value = -1;
}

function onNavItemMouseEnter(i) {
  navIndex.value = i;
}

// let timer = null;

function onNavMouseLeave() {
  // timer = setTimeout(() => {
  //   navIndex.value = -1;
  // }, 1000);
}

function onSubNavMouseEnter() {
  // clearTimeout(timer);
}

const clothes = ref(null);

// onMounted(() => {
//   // 当clothes滚动到视野中时, dispatch
//   const clothesObserver = new IntersectionObserver(
//     (entries) => {
//       if (entries[0].isIntersecting) {
//         // 应该自己写的内容
//         store.dispatch('home/updateClothes');
//       }
//     },
//     {
//       root: null,
//       rootMargin: '0px',
//       threshold: 0.5,
//     },
//   );
//   // 启动观察clothes.value是否进入视野
//   clothesObserver.observe(clothes.value);
// });


</script>

<template>

  <nav @mouseleave="onNavMouseLeave">
    <div @mouseenter="onNavMouseLeave" class="nav-item">首页</div>
    <div class="nav-item" v-for="(item, i) in category" :key="item.id" @mouseenter="onNavItemMouseEnter(i)">
      <router-link :to="{
        name: '分类',
        params: {
          id: item.id,
        },
      }">
        {{ item.name }}
      </router-link>
    </div>
    <div class="sub-nav" :class="{
      expand: navIndex !== -1,
    }" @mouseenter="onSubNavMouseEnter">
      <div v-for="item in category[navIndex]?.children" :key="item.id">
        {{ item.name }}
      </div>
    </div>
  </nav>

  <!-- <div ref="clothes" class="clothes">
    123
  </div> -->

  <router-view />

  <!--
  <div @mouseleave="onMouseLeave">
    <div class="category">
      <div
        class="category-item"
        v-for="(item, i) in category"
        :key="item.id"
        @mouseenter="onMouseEnter(i)"
      >
        {{ item.name }}
        {{ item.children.slice(0, 2).map((item) => item.name).join(' ') }}
      </div>
    </div>
    <div class="sub-category" v-show="index !== -1">
      <div class="sub-category-item" v-for="item in category[index]?.goods" :key="item.id">
        {{ item.name }}
      </div>
    </div>
  </div> -->

</template>

<style lang="scss" scoped>
.category {
  float: left;
}

.sub-category {
  float: left;
  outline: 1px solid red;
}

.category-item {
  padding: 10px;
  border: 1px solid #ccc;
  margin: 10px;
  cursor: pointer;
  width: 300px;
}

nav {
  position: relative;

  &::after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
  }
}

.nav-item {
  float: left;
  margin-right: 16px;
}

.sub-nav {
  height: 0px;
  width: 100%;
  transition: height 2s;
  position: absolute;
  top: 50px;
  left: 0;
  z-index: 9999;
  overflow: hidden;

  // &.expand {
  //   // height: 100px;
  //   // outline: 1px solid red;
  // }
}

.clothes {
  margin-top: 2000px;
}
</style>
